import React, { Component } from 'react';
import { Flex, WhiteSpace, WingBlank } from 'antd-mobile';
import { Table, Statistic, Icon } from 'antd';
import _ from 'lodash';

export default class YearTarget extends Component {
  state = {
    oliveColumns: [
      {
        dataIndex: 'name',
        key: 'name',
        align: 'right',
      },
      {
        dataIndex: 'value',
        key: 'value',
        render: (text, row) => this.renderStatistic(text, row),
      },
    ],
    differencesColumns: [
      {
        dataIndex: 'name',
        key: 'name',
        align: 'center',
      },
      {
        dataIndex: 'value',
        key: 'value',
        render: text => this.renderDifferenceVOStatistic(text),
      },
    ],
  };

  buildOliveDataSource = obj => {
    const dataSource = [];
    const arr = [
      {
        key: 'yearEarlyInventoryAmount',
        name: '年初存货',
      },
      {
        key: 'yearNewSupplyAmount',
        name: '年度新供',
      },
      {
        key: 'yearTotalSalableAmount',
        name: '年度总可售',
      },
      {
        key: 'yearSigningTargetAmount',
        name: '年度签约目标',
      },
      {
        key: 'yearComprehensiveRate',
        name: '年度综合去化率',
      },
      {
        key: 'yearCarryForwardRate',
        name: '年度结转去化率',
      },
      {
        key: 'turnoverCoefficient',
        name: '周转系数',
      },
    ];
    _.forEach(arr, (k, i) => {
      dataSource.push({
        key: i,
        name: k.name,
        value: obj ? obj[k.key] : '',
      });
    });
    return dataSource;
  };

  buildDifferences = obj => {
    const differencesD = [];
    if (obj && !_.isEmpty(obj.differencesDto)) {
      _.forEach(obj.differencesDto, (v, i) => {
        differencesD.push({
          key: i,
          name: `VS ${v.name}`,
          value: {
            amount: v.amount,
            rate: v.rate,
          },
        });
      });
    }
    return differencesD;
  };

  // 调整前后
  renderStatistic = (text, row) => {
    let value;
    let precision;
    let suffix;
    const { name } = row;

    if (name.indexOf('率') === -1) {
      value = `${text / 10000}`;
      suffix = '';
      precision = 0;
    }
    if (name.includes('系')) {
      value = text;
      suffix = '';
      precision = 1;
    }
    if (name.includes('率')) {
      value = text;
      suffix = '%';
      precision = 2;
    }

    return <Statistic value={(value * 1).toFixed(precision)} suffix={suffix} />;
  };

  // 差异
  renderDifferenceVOStatistic = text => {
    const { amount, rate } = text;
    const value = _.toNumber(`${amount}`.replace('%', '')) / 10000;
    const percentage = _.toNumber(`${rate}`.replace('%', ''));
    let val1;
    let val2;
    let color;
    let prefix;
    let symbol;
    if (value > 0) {
      val1 = value;
      color = 'rgba(255, 0, 25, 1)';
      symbol = '+';
    } else if (value < 0) {
      val1 = value * -1;
      color = 'rgba(67, 207, 124, 1)';
      symbol = '-';
    } else if (value === 0 || value === '-0') {
      color = 'rgba(255, 141, 26, 1)';
      val1 = 0;
    } else if (_.isNaN(value)) {
      val1 = null;
      color = 'rgba(0, 0, 0, 0.65)';
    }

    if (percentage > 0) {
      val2 = percentage;
      prefix = <Icon type="arrow-up" />;
    } else if (percentage < 0) {
      val2 = percentage * -1;
      prefix = <Icon type="arrow-down" />;
    } else if (percentage === 0 || percentage === '-0') {
      val2 = 0;
    } else if (_.isNaN(percentage)) {
      val2 = null;
    }

    return (
      <Flex justify="around" align="center" wrap="nowrap">
        <div style={{ width: '50%', textAlign: 'right' }}>
          {val1 === null ? (
            <Statistic
              formatter={() => '——'}
              valueStyle={{ color, textAlign: 'center', lineHeight: '35px' }}
            />
          ) : (
            <Statistic
              prefix={symbol}
              value={val1.toFixed(0)}
              valueStyle={{ color, textAlign: 'center', lineHeight: '35px' }}
            />
          )}
        </div>
        <div style={{ width: '50%', textAlign: 'right' }}>
          {val2 === null ? (
            <Statistic
              formatter={() => '——'}
              valueStyle={{ color, textAlign: 'center', lineHeight: '35px' }}
            />
          ) : (
            <Statistic
              value={val2.toFixed(2)}
              valueStyle={{ color, textAlign: 'center', lineHeight: '35px' }}
              prefix={prefix}
              suffix="%"
            />
          )}
        </div>
      </Flex>
    );
  };

  render() {
    const { oliveColumns, differencesColumns } = this.state;
    const { yearIndex, tabs1key } = this.props;
    return (
      <div id="YearTarget" className="YearTarget">
        <WingBlank>
          <Flex justify="between">
            <span className="sub-title">{tabs1key === 1 ? '年度指标差异' : '年度指标概览'}</span>
            <span className="font1">单位：万元</span>
          </Flex>
          <WhiteSpace />
          <Table
            showHeader={false}
            columns={tabs1key === 1 ? differencesColumns : oliveColumns}
            dataSource={
              tabs1key === 1
                ? this.buildDifferences(yearIndex)
                : this.buildOliveDataSource(yearIndex)
            }
            bordered
            size="middle"
            pagination={false}
          />
        </WingBlank>
      </div>
    );
  }
}
